import React, { useEffect, useState } from 'react'
import NavBar from '../../../components/nav-bar'
import './index.scss'
import axios from '../../../utils/axios'
import UserCard from './usercard'
import ImageCard from './image-card'
import TextContent from './text-content'
import qs from 'qs'
import InputBox from './input-box'
import { message } from '../../../components/message'

export default function DynamicDetail() {
  const [detail, setDetail] = useState()
  const [commentDetail, setCommentDetail] = useState()
  const [placeholderText, setPlaceholderText] = useState('留个友善的评论吧')
  const [reply, setReply] = useState('')
  const { id } =
    qs.parse(window.location.search, { ignoreQueryPrefix: true }) || {}
  useEffect(() => {
    console.log(id)
    getDetail()
  }, [id])
  const getDetail = () => {
    axios.get(`/dynamic/getDynamicDetail?id=${id}`).then((res) => {
      console.log(res.data.data, '121')
      setDetail(res.data.data)
    })
    axios.get(`/dynamic/getCommentList?dynamicId=${id}`).then((res) => {
      console.log(res.data)
      setCommentDetail(res.data.data)
    })
  }
  const onCommentSend = (e) => {
    console.log(e.value)
    let params = {
      userid: localStorage.getItem('userid'),
      dynamicId: id,
      commentContent: e.value,
      toReply: reply,
    }
    axios.post('/dynamic/addComment', params).then((res) => {
      console.log(res.data.mes)
      message(res.data.mes)
    }).then(()=>{
      getDetail()
    })
  }
  return (
    <div className="dynamic-detail">
      <NavBar roomName="动态详情"></NavBar>
      <div className="dynamic-detail-header">
        <UserCard info={detail}></UserCard>
      </div>
      <div className="dynamic-detail-content">
        <TextContent
          title={detail?.title}
          content={detail?.textContent}
        ></TextContent>
      </div>
      <div className="dynamic-detail-content">
        <ImageCard imgUrl={detail?.imgUrl}></ImageCard>
      </div>
      {commentDetail?.length > 0 ? (
        <div className="dynamic-detail-comment">
          <div className="comment-top">{`评论(${commentDetail?.length})`}</div>
          {commentDetail?.map((item, index) => (
            <div
              key={`${index}`}
              className="comment-content"
              onClick={() => {
                setPlaceholderText(`回复：${item.username}`)
                setReply(`${item.userid}`)
              }}
            >
              <div className={'comment-floor'}>{`${index + 1}楼`}</div>
              <UserCard info={item}></UserCard>
              {item.replyName ? (
                <TextContent
                  content={`回复@${item.replyName}:${item.commentContent}`}
                ></TextContent>
              ) : (
                <TextContent content={item.commentContent}></TextContent>
              )}
            </div>
          ))}
        </div>
      ) : (
        ''
      )}

      <div className="dynamic-detail-send">
        {/* 发送评论 */}
        <InputBox
          onMessageSend={onCommentSend}
          placeholder={placeholderText}
        ></InputBox>
      </div>
    </div>
  )
}
